<template>
	<van-nav-bar title="商城" />
	<div>
		<van-search v-model="searchValue" shape="round" background="#fffff" placeholder="搜索商品"  to ="/search"/>
	</div>

	<div>
		<van-tree-select style="height: 90%" v-model:active-id="activeId" v-model:main-active-index="activeIndex"
			:items="categoryList" @click-nav="onSelector">
			<template #content>
				<div class="m-box" v-for="(item, index) in selectList" :key="item.id" @click="onDetail(item.id)">
					<img :src="item.picture" alt="logo" />
					<div class="m-right">
						<h3>{{ item.product }}</h3>
						<p>￥{{ item.price }} <button @click="onDetail(item.id)">查看详情</button> </p>
					</div>
				</div>
			</template>
		</van-tree-select>
	</div>
	
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import type {Ref} from 'vue'
import { useCategory } from '@/hooks/category'
import {useProductDetail} from '@/hooks/home'

const searchValue = ref('')
const { activeId, activeIndex, categoryList, selectList, onSelector } = useCategory()
const { onDetail } = useProductDetail()

</script>

<style lang="scss" scoped>
.m-box {
	display: flex;

	img {
		width: 80px;
		height: 80px;
	}

	.m-right {
		flex: 1;
		margin-left: 10px;

		h3 {
			margin-bottom: 10px;
			font-size: 10px;
		}

		p {
			color: red;
			margin-bottom: 0;
		}
		button{
            border: none;
			border-radius: 10px;
			background-color: rgb(158, 196, 196);
			margin-left: 30px;
		}
	}
}
</style>
